<template>
  <!-- <div class="left">
    <el-icon class="expand" @click="changeCollapse">
      <component v-bind:is="collapse ? 'expand' : 'fold'"></component>
    </el-icon>
  </div> -->
  <div class="top-menu">
    <Menu
      v-for="menu in menus"
      :name="menu.meta?.title || ''"
      :key="menu.name"
      :path="menu.path"
      :sub-menus="menu.children"
    >
      <component :is="menu.meta?.icon"></component
    ></Menu>
  </div>
  <div class="person">
    <el-dropdown @command="handleCommand">
     <el-avatar :icon="UserFilled"></el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="1">修改密码</el-dropdown-item>
          <el-dropdown-item divided command="3">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts" setup>
import { UserFilled } from '@element-plus/icons-vue'
import { computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { MyRoute, routes } from "@/router/index";
import Menu from "./Menu/index.vue";
const store = useStore();
const router = useRouter();
function filterMenus(routes: MyRoute[]) {
  const newMenus: MyRoute[] = [];
  for (const route of routes) {
    if (route.meta && !route.meta.hidden) {
      const menu={...route}
      if (route.children) {
        menu.children = filterMenus(route.children);
      }
      newMenus.push(menu)
    }
  }
  return newMenus;
}

const menus = filterMenus(routes[0].children || []);
const collapse = computed(() => store.state.app.collapse);

const changeCollapse = () => {
  store.commit("setCollapse", !store.state.app.collapse);
};
const handleCommand = (command: string) => {
  switch (command) {
    case "1":
    case "2":
      break;
    case "3":
      store.commit("logout");
      router.push("/login");
  }
};
</script>
<style lang="scss">
.top-menu {
  display: flex;
  justify-content: center;
}
.expand {
  font-size: 26px;
  color: #7d7d7d;
  cursor: pointer;
  vertical-align: middle;
}
.person {
  position: absolute;
  right: 20px;
}
</style>
